<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JSSDK</title>

    <!-- Bootstrap -->
    <link href="{:config('__public__')}/static/bootstrap-3.3.4/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<style type="text/css">
  .rowTitle{
    line-height: 30px;
  }
</style>
      <h3 class="text-center bg-success" style="line-height: 40px">微信JS-SDK</h3>

    <div class="container">

      <div class="row">
        <h4 class="text-center bg-primary rowTitle"> JSSDK demo </h4>
        <p class="text-center">微信JS-SDK说明文档 https://mp.weixin.qq.com/wiki 微信网页开发</p>
        <div class="col-lg-4">
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">隐藏所有非基础按钮接口</h3>
            </div>
            <div class="panel-body">
              <p style="WORD-BREAK: break-all; WORD-WRAP: break-word">// “基本类”按钮详见附录3</p>
              <p>snsapi_base： <a href="javascript::wx.hideAllNonBaseMenuItem();">点击隐藏</a></p>
              <p>&nbsp;</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">显示所有功能按钮接口</h3>
            </div>
            <div class="panel-body">
              <p style="WORD-BREAK: break-all; WORD-WRAP: break-word"></p>
              <p>snsapi_userinfo： <a href="javascript::wx.showAllNonBaseMenuItem();">点击显示</a></p>
              <p>&nbsp;</p>
            </div>
          </div>
        </div>
        
        <div class="col-lg-4">
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">关闭当前网页窗口接口</h3>
            </div>
            <div class="panel-body">
              <p style="WORD-BREAK: break-all; WORD-WRAP: break-word"></p>
              <p>snsapi_base： <a href="javascript::wx.closeWindow();">点击关闭</a></p>
              <p>&nbsp;</p>
            </div>
          </div>
        </div>
      </div>


    </div>
  </body>
  <script type="text/javascript">
    // 步骤三：通过config接口注入权限验证配置
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: "{$appId}", // 必填，公众号的唯一标识
        timestamp: "{$timestamp}", // 必填，生成签名的时间戳
        nonceStr: "{$nonceStr}", // 必填，生成签名的随机串
        signature: "{$signature}",// 必填，签名，见附录1
        jsApiList: [{$jsApiList}] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        // jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    // 步骤四：通过ready接口处理成功验证
    wx.ready(function(){
        alert('success');

        wx.hideMenuItems({
            menuList: [ "menuItem:share:appMessage",  "menuItem:share:timeline", "menuItem:share:qq", "menuItem:share:weiboApp",  "menuItem:favorite",  "menuItem:share:facebook", "menuItem:share:QZone"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        });
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    });
    // 步骤五：通过error接口处理失败验证
    wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });

    // 判断当前客户端版本是否支持指定JS接口
    wx.checkJsApi({
        jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function(res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
    });
  </script>
</html>